<template>
  <div>
    <h2>用户登录/注册</h2>
    <el-tabs v-model="activeTab">
      <el-tab-pane label="登录" name="login">
        <el-form ref="loginForm" :model="loginData" label-width="80px">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="loginData.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="loginData.password" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login">登录</el-button>
            <a href="#" @click.prevent="switchToRegister">还没有账号？去注册</a>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="注册" name="register">
        <el-form ref="registerForm" :model="registerData" :rules="rulesRegister" label-width="80px">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="registerData.username" ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="registerData.password" ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input type="password" v-model="registerData.confirmPassword" ></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="registerData.email"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="register">注册</el-button>
            <a href="#" @click.prevent="switchToLogin">已有账号？去登录</a>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {loginRules, registerRules} from "@/api/login";
import {setToken, setUserName} from "@/api/token";
/**
 * 加密库
 */
import CryptoJS from 'crypto-js';
export default {
  data() {
    return {
      activeTab: "login",
      loginData: {
        username: "",
        password: "",
      },
      registerData: {
        username: "",
        password: "",
        confirmPassword: "",
        email: "",
      },
      // 登录表单校验规则无需提取到这里，因为是直接调用后端接口进行校验
      // 注册表单校验规则
      rulesRegister: {
        'username': [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          { min: 3, max: 20, message: "用户名长度在 3 到 20 个字符之间", trigger: "blur" },
        ],
        'password': [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { min: 8, message: "密码长度至少为 8 位", trigger: "blur" },
        ],
        'confirmPassword': [
          { 'required': true, 'message': "确认密码不能为空", 'trigger': "blur" },
          {
            'validator': this.validateConfirmPassword,
            'trigger': "blur",
          },
        ],
        'email': [
          { required: true, message: "邮箱不能为空", trigger: "blur" },
          { type: "email", message: "请输入正确的邮箱格式", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
  },
  methods: {
    /**
     * 登录  只返回token
     */
    login() {
      loginRules(this.loginData).then((res) => {
        if (res.data == null) {
          this.$message.error(res['message']);
        } else {
          this.$message.success(res.message);
          setToken(res.data);
          setUserName(this.loginData.username)
          this.$router.push('/index/home')
        }
      });
    },
    /**
     * 注册
     */
    register() {
      this.$refs["registerForm"].validate((valid) => {
        if (valid) {
          registerRules(this.registerData).then((res) => {
            if (res.data === true){
              this.$message.success(res.message);
            }else {
              this.$message.error(res.message);
            }
          });
        } else {
          // 可以根据需要进行处理
        }
      });
    },
    /**
     * 切换到注册
     */
    switchToRegister() {
      this.activeTab = "register";
    },
    /**
     * 切换到登录
     */
    switchToLogin() {
      this.activeTab = "login";
    },
    /**
     * 确认密码校验
     * @param rule
     * @param value
     * @param callback
     */
    validateConfirmPassword(rule, value, callback) {
      if (value === this.registerData.password) {
        callback();
      } else {
        callback(new Error("两次密码输入不一致"));
      }
    },
  },
};
</script>

<style scoped>
h2 {
  text-align: center;
}
</style>